<!-- 学社 - 考试 - 考试结果 -->
<template>
  <view class="relative w-full">
    <!-- 背景图 -->
    <view class="w-full min-h-screen absolute left-0 top-0 z-1">
      <image class="w-full min-h-screen" src="/static/images/common/bg_invite.png" />
    </view>
    <view class="w-full absolute left-0 top-0 z-4">
      <view class="relative flex items-center justify-center"
        :style="{ height: backIconHeight + 'px', marginTop: backIconTop + 'px' }">
        <u-icon class="ic-back" name="arrow-left" color="#666" size="34" @click="onBack"></u-icon>
        <view class="text-34 c-#000">考试结果</view>
      </view>
      <u-line margin="28rpx 0 0" class="w-full" color="#eee" :hair-line="false" />
    </view>
    <!-- 主体 -->
    <view class="relative z-3 px-4 pt-26">
      <view class="relative w-full h-214">
        <image class="w-full h-full"
          :src="`/package_society/static/images/banner_exam_${isPass ? 'pass' : 'fail'}.png`" />
        <view class="absolute left-28 top-46 z-4 c-white text-32">{{ isPass ? '恭喜您通过考试' :
          '很遗憾，您未通过考试' }}</view>
        <view class="absolute left-28 top-94 z-4 c-white text-28">{{ isPass ? 'CONGRATULATIONS' :
          'UNFORTUNATELY' }}</view>
      </view>
      <view class="relative z-4 px-4 pt-5 pb-3 bg-poster">
        <view class="relative py-2 pl-2 bg-#F5F5F5 h-122 flex items-center">
          <u-image class="mr-2" width="92" height="92" border-radius="12"
            src="/package_society/static/images/img_cover_exam.png"></u-image>
          <view class="max-width-80 text-single ml-4 mr-11 c-#666 text-28">{{ state.detailData?.exam_name }}</view>
        </view>
        <view :class="['flex justify-end text-28 mt-3', isPass ? 'c-#999' : 'c-#FF513A']">{{ isPass ?
          `考试时长：${state.detailData?.exam_time}` : `共计答错${state.detailData?.fail_number}题` }}</view>
        <u-line class="w-full" margin="20rpx 0 24rpx" color="#eee" :hair-line="false" />
        <view class="pl-4 flex justify-between items-center">
          <view class="flex-1 flex flex-col justify-center items-center text-single">
            <view class="avatar-wrap rounded-full">
              <u-image width="100%" height="100%" shape="circle" :src="userInfo.avatar"></u-image>
            </view>
            <view class="c-#333 text-28 mt-1 w-full text-single">{{ userInfo.nickname }}</view>
          </view>
          <view class="relative flex-shirk-0 w-414 h-200 ml-2">
            <image class="absolute left-0 top-0 w-full h-full"
              :src="`/package_society/static/images/img_exam_level${state.detailData?.level}.png`"></image>
            <view
              :class="['position-score absolute bottom-10 w-full text-100 font-bold', `c-score-level${state.detailData?.level}`]">
              {{ state.detailData?.score }}分</view>
          </view>
        </view>
      </view>
      <view class="flex items-center mt-4">
        <view v-if="state.detailData?.level > 1" class="btn btn-save" @click="wxShare">微信分享</view>
        <view v-if="state.detailData?.level == 1" class="btn btn-save"
          @click="navigate(`/package_society/pages/exam/testing/index?exam_id=${state.detailData?.exam_id}&club_id=${state.club_id}&duration=${state.duration}&exam_log_id=${state.detailData?.exam_log_id}`)">
          重新考试</view>
        <view class="w-32"></view>
        <view class="btn btn-share"
          @click="navigate(`/package_society/pages/exam/testing/detail?exam_log_id=${state.detailData?.exam_log_id}&club_id=${state.club_id}&duration=${state.duration}`)">
          查看错题</view>
      </view>
      <!-- 海报 -->
      <l-painter ref="painter" css="width: 690rpx; height: 700rpx; background-color: #fff;"
        custom-style="position: fixed; left: 200%">
        <l-painter-view css=" position: relative; width: 100%;  height: 214rpx;">
          <l-painter-image css="width: 100%; height: 100%;"
            :src="`/package_society/static/images/banner_exam_${isPass ? 'pass' : 'fail'}.png`" />
          <l-painter-text :text="isPass ? '恭喜您通过考试' : '很遗憾，您未通过考试'"
            css="position: absolute; left: 28rpx; top: 46rpx; z-index: 4; color: #fff; font-size: 32rpx;" />
          <l-painter-text :text="isPass ? 'CONGRATULATIONS' : 'UNFORTUNATELY'"
            css=" position: absolute; left: 28rpx; top: 94rpx; z-index: 4; color: #fff; font-size: 28rpx;" />
        </l-painter-view>
        <l-painter-view
          css="position: relative; z-index: 4; padding-left: 32rpx; padding-right: 32rpx; padding-top: 40rpx; padding-bottom: 24rpx; margin-top: -50rpx; border-radius: 12rpx; background-color: #FFFFFF; box-shadow: 0px 3px 6px 0px rgba(244, 175, 34, 0.3);">
          <l-painter-view
            css="position: relative; padding-top: 16rpx;  padding-bottom: 16rpx;  padding-left: 16rpx;  background-color: #F5F5F5; height: 122rpx;  display: flex; align-items: center;">
            <l-painter-image css="margin-right: 16rpx; width: 92rpx; border-radius: 12rpx;"
              src="/package_society/static/images/img_cover_exam.png" />
            <l-painter-text :text="state.detailData?.exam_name"
              css="max-width: 80%; line-clamp: 1; margin-left: 32rpx;  margin-right: 88rpx; color: #666; font-size: 28rpx;" />
          </l-painter-view>
          <l-painter-text :text="isPass ? `考试时长：${state.detailData?.exam_time}` : `共计答错${state.detailData?.fail_number}题`"
            :css="`display: flex; text-align: right; font-size: 28rpx; margin-top: 24rpx; color:  ${isPass ? '#999;' : '#FF513A;'}`" />
          <l-painter-view
            css="width: 100%; height: 2rpx; background-color: #eee;  margin-top: 20rpx; margin-bottom: 24rpx;"></l-painter-view>
          <l-painter-view css="padding-left: 32rpx; display: flex; justify-content: space-between; align-items: center;">
            <l-painter-view
              css="flex: 1; display: flex; flex-direction: column; justify-content: center; align-items: center; line-clamp: 1; height: 200rpx;">
              <l-painter-view
                css="width: 116rpx; height: 116rpx; border: 6rpx solid #F4AF22; border-radius: 50%; margin-top: 16rpx; margin: 16rpx auto; 0;">
                <l-painter-image css="width: 116rpx; height: 116rpx; border-radius:50%;" :src="userInfo.avatar" />
              </l-painter-view>
              <l-painter-text :text="userInfo.nickname"
                css="color: #333; font-size: 28rpx; text-align: center; margin-top: 8rpx; width: 100%; line-clamp: 1;" />
            </l-painter-view>
            <l-painter-view css="position: relative; flex-shrink: 0; width: 414rpx; height: 200rpx; margin-left: 16rpx;">
              <l-painter-image css="width: 414rpx; height: 200rpx;"
                :src="`/package_society/static/images/img_exam_level${state.detailData?.level}.png`" />
              <l-painter-text :text="`${state.detailData?.score}分`"
                :css="`text-align: center; position: absolute; z-index: 2; bottom: 10rpx; width: 414rpx; font-size: 100rpx; font-weight: 700; color: ${levelColor[state.detailData?.level - 1]};`" />
            </l-painter-view>
          </l-painter-view>
        </l-painter-view>
      </l-painter>
    </view>
    <view class="bottom-wrap-16 bg-white" v-if="state.detailData?.level > 1">
      <u-line class="w-full" color="#eee" :hair-line="false" />
      <view class="btn-submit" @click="onTrend">发布动态</view>
    </view>
  </view>
</template>
<script setup>
import { navigate } from "@/common/util/uni";
import { useUserStore } from '@/store/user'
import { uploadUrl } from '@/common/config/config'

const painter = ref()
const userStore = useUserStore()
const state = reactive({
  club_id: '', // 学社id
  duration: '', // 考试时长字符串形式
  detailData: null // 考试结果数据
})

const levelColor = ['#FF513A', '#3FB352', '#F4AF22']

const userInfo = computed(() => userStore.userInfo)
const backIconTop = uni.getMenuButtonBoundingClientRect().top
const backIconHeight = uni.getMenuButtonBoundingClientRect().height

const isPass = computed(() => state.detailData && state.detailData?.level > 1)

function onBack () {
  navigate(`/package_society/pages/society/index?tabId=4&club_id=${state.club_id}`)
}

// 微信分享
function wxShare () {
  nextTick(() => {
    painter.value.canvasToTempFilePath({
      fileType: "jpg",
      pathType: 'url'
    }).then((res) => {
      console.log('canvasToTempFilePath', res.tempFilePath)
      wx.showShareImageMenu({
        path: res.tempFilePath,
        success: () => { },
      })
    })
  })
}

// 跳转发布动态页
function onTrend () {
  nextTick(() => {
    uni.showLoading({
      title: '正在生成分享图'
    })
    painter.value.canvasToTempFilePath({
      fileType: "jpg",
      pathType: 'url'
    }).then((res) => {
      uni.uploadFile({
        url: uploadUrl,
        header: { token: userStore.token },
        filePath: res.tempFilePath,
        name: 'file',
        success: res => {
          const data = JSON.parse(res.data)
          if (data.code == 1) {
            const fullurl = data.data.fullurl
            uni.navigateTo({
              url: `/package_society/pages/trend/add?club_id=${userStore.currentSocietyId}&image=${fullurl}`
            })
          }
        },
        complete: () => uni.hideLoading()
      })
    })
  })
}

onLoad(options => {
  console.log('==', options);
  state.club_id = options.club_id
  state.duration = options.duration
  state.detailData = options.data ? JSON.parse(decodeURIComponent(options.data)) : null
  console.log('==detailData', state.detailData);
})
</script>

<style lang="scss" scoped>
.btn {
  flex: 1;
  padding: 14rpx 0;
  text-align: center;
  font-size: 28rpx;
  border-radius: 10rpx;
}

.btn-save {
  color: #F4AF22;
  border: 2rpx solid #F4AF22;
}

.btn-share {
  color: #fff;
  background-color: #F4AF22;
}

.ic-back {
  position: absolute;
  left: 32rpx;
  top: 50%;
  transform: translateY(-50%);
}

.bg-poster {
  margin-top: -50rpx;
  border-radius: 12rpx;
  background-color: #FFFFFF;
  box-shadow: 0px 3px 6px 0px rgba(244, 175, 34, 0.3);
}

.slot-content {
  width: 600rpx;
  padding-bottom: 4rpx;
  // height: 890rpx;
}

.avatar-wrap {
  width: 116rpx;
  height: 116rpx;
  border: 6rpx solid #F4AF22;
}

.position-score {
  display: flex;
  justify-content: center;
}

.c-score-level1 {
  color: #FF513A;
}

.c-score-level2 {
  color: #3FB352;
}

.c-score-level3 {
  color: #F4AF22;
}
</style>
